<ng-form name="secretsForm" class="osc-secrets-form">
  <div class="form-group">
    <div class="basic-secrets">
      <div class="input-labels">
        <label class="input-label">
          {{displayType | startCase}} Secret
        </label>
      </div>
      <div ng-repeat="pickedSecret in pickedSecrets">
        <div class="secret-row">
          <div class="secret-name">
            <ui-select ng-disabled="disableInput" ng-model="pickedSecret.name">
              <ui-select-match placeholder="Secret name">{{$select.selected}}</ui-select-match>
              <ui-select-choices repeat="secret in (secretsByType[type] | filter : $select.search)">
                <div ng-bind-html="secret | highlight : $select.search"></div>
              </ui-select-choices>
            </ui-select>
          </div>
          <div class="remove-secret">
            <a ng-click="removeSecret($index)"  href="" role="button" class="btn-remove">
              <span class="pficon pficon-close" aria-hidden="true"></span>
              <span class="sr-only">Remove build secret</span>
            </a>
          </div>
        </div>
      </div>
      <div class="help-blocks" ng-switch="displayType">
        <div class="help-block" ng-switch-when="source">
          Secret with credentials for pulling your source code.
          <a href="{{'git_secret' | helpLink}}" target="_blank"><span class="learn-more-inline">Learn More&nbsp;<i class="fa fa-external-link" aria-hidden="true"></i></span></a>
        </div>
        <div class="help-block" ng-switch-when="pull">
          Secret for authentication when pulling images from a secured registry.
          <a href="{{'pull_secret' | helpLink}}" target="_blank"><span class="learn-more-inline">Learn More&nbsp;<i class="fa fa-external-link" aria-hidden="true"></i></span></a>
        </div>
        <div class="help-block" ng-switch-when="push">
          Secret for authentication when pushing images to a secured registry.
          <a href="{{'pull_secret' | helpLink}}" target="_blank"><span class="learn-more-inline">Learn More&nbsp;<i class="fa fa-external-link" aria-hidden="true"></i></span></a>
        </div>
      </div>
    </div>
  </div>

  <div class="osc-secret-actions" ng-if="!disableInput">
    <span ng-if="canAddSourceSecret()">
      <a href=""
        role="button"
        ng-click="addSourceSecret()">Add Another Secret</a>
      <span ng-if="secretsVersion | canI : 'create'" class="action-divider">|</span>
    </span>
    <a href=""
      ng-if="secretsVersion | canI : 'create'"
      role="button"
      ng-click="openCreateSecretModal()">Create New Secret</a>
  </div>
</ng-form>
